import React, { memo,useEffect ,useRef} from 'react'
import {shallowEqual, useDispatch,useSelector} from 'react-redux';

import {AlbumWrapper} from './style';

import ThemeHeaderRCM from '@/components/theme-header-rcm';
import AlbumCover from '@/components/album-cover';
import {Carousel} from 'antd';

import {getNewAlbumAction} from '../../store/actionCreators';




export default memo(function NewAlbum() {

    const {newAlbums}=useSelector(state => ({
        newAlbums:state.getIn(["recommend","newAlbums"])
    }),shallowEqual)

    const dispatch=useDispatch();

    const carouselRef=useRef();

    useEffect(() => {
        dispatch(getNewAlbumAction(15));
    }, [dispatch])


    return (
        <AlbumWrapper>
            <ThemeHeaderRCM title="新碟上架" moreLink="/discover/album"/>
            <div className="content">
                <button className="arrow arrow-left sprite_02" onClick={e=>carouselRef.current.prev()}></button>
                <div className="album">
                    <Carousel dots={false} ref={carouselRef}>
                        {
                            [0,1,2].map(item=>{
                            return(
                                <div key={item} className="page">
                                    {
                                        newAlbums.slice(item*5,(item+1)*5).map(iten=>{
                                            return(
                                                <AlbumCover key={iten.id} info={iten}/>
                                            )
                                        })
                                    }
                                </div>
                                )
                             })
                        }
                    </Carousel>
                </div>
                <button className="arrow arrow-right sprite_02" onClick={e=>carouselRef.current.next()}></button>
            </div>


        </AlbumWrapper>
    )
})

